<template>
  <el-dialog
    :title="!id ? $t('Common.Add') : $t('Common.Edit')"
    :close-on-click-modal="false"
    :visible.sync="visible"
  >
    <el-form :model="form" ref="form" @keyup.enter.native="dataFormSubmit()" label-width="80px" :inline="true">
      <el-form-item label="客户全称" prop="customerName" :rules="[{required: true,message: '请输入客户全称'},{min: 0,max:255,message: '请输入客户全称'}]">
        <el-input v-model="form.customerName" placeholder="必填"></el-input>
      </el-form-item>
      <el-form-item label="客户简称" propprop="customerJcname" :rules="[{required: true,message: '请输入客户简称'},{min: 0,max:255,message: '请输入客户简称'}]">
        <el-input v-model="form.customerJcname" placeholder="必填"></el-input>
      </el-form-item>
      <el-form-item label="系统类型" prop="systemType" :rules="[{required: true,message: '请输入系统类型'},{min: 0,max:255,message: '请输入系统类型'}]">
        <el-select v-model="form.systemType" placeholder="请选择">
          <el-option v-for="item in systemtype" :key="item.id" :label="item.label" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="客户编号" prop="customerNo" :rules="[{required: true,message: '请输入客户编号'},{min: 0,max:255,message: '请输入客户编号'}]">
        <el-input type="number" v-model="form.customerNo" placeholder="必填"></el-input>
      </el-form-item>
      <el-form-item label="主联系人" prop="contacts" :rules="[{required: true,message: '请输入主联系人'},{min: 0,max:255,message: '请输入主联系人'}]">
        <el-input v-model="form.contacts" placeholder="必填"></el-input>
      </el-form-item>
      <el-form-item label="客户类型" prop="customerType" :rules="[{required: true,message: '请输入客户类型'},{min: 0,max:255,message: '请输入客户类型'}]">
        <el-select v-model="form.customerType" placeholder="请选择">
          <el-option v-for="item in usertype" :key="item.id" :label="item.label" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="销售人员" prop="salesman" :rules="[{required: true,message: '请输入销售人员'},{min: 0,max:255,message: '请输入销售人员'}]">
        <el-input v-model="form.salesman" placeholder="必填"></el-input>
      </el-form-item>

      <el-form-item label="手机" prop="phone" :rules="[{required: true,message: '请输入手机'},{min: 0,max:11,message: '请输入正确手机号'}]">
        <el-input type="number" v-model="form.phone" placeholder="必填"></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="status" :rules="[{required: true,message: '请输入状态'},{min: 0,max:255,message: '请输入状态'}]">
        <el-select v-model="form.status" placeholder="请选择">
          <el-option v-for="item in userstatus" :key="item.id" :label="item.label" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="地区" prop="region" :rules="[{message: '请输入地区'},{min: 0,max:255,message: '请输入地区'}]">
        <el-input v-model="form.region" placeholder="地区"></el-input>
      </el-form-item>
      <el-form-item label="邮编" prop="ybcode" :rules="[{message: '请输入邮编'},{min: 0,max:6,message: '请输入正确邮编'}]">
        <el-input type="number" v-model="form.ybcode" placeholder="邮编"></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="address" :rules="[{message: '请输入地址'},{min: 0,max:255,message: '请输入地址'}]">
        <el-input v-model="form.address" placeholder="地址"></el-input>
      </el-form-item>
      <el-form-item label="公司电话" prop="companyPhone" :rules="[{message: '请输入公司电话'},{min: 0,max:255,message: '请输入公司电话'}]">
        <el-input type="number" v-model="form.companyPhone" placeholder="公司电话"></el-input>
      </el-form-item>
      <el-form-item label="传真" prop="fax" :rules="[{message: '请输入传真'},{min: 0,max:255,message: '请输入传真'}]">
        <el-input v-model="form.fax" placeholder="传真"></el-input>
      </el-form-item>

      <el-form-item label="客户来源" prop="customerSource" :rules="[{required: true,message: '请输入客户来源'},{min: 0,max:255,message: '请输入客户来源'}]">
        <el-select v-model="form.customerSource" placeholder="请选择">
          <el-option v-for="item in userly" :key="item.id" :label="item.label" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="主页" prop="homepage" :rules="[{message: '请输入主页'},{min: 0,max:255,message: '请输入主页'}]">
        <el-input v-model="form.homepage" placeholder="主页"></el-input>
      </el-form-item>
      <el-form-item label="Email" prop="email" :rules="[{message: '请输入Email'},{min: 0,max:255,message: '请输入Email'}]">
        <el-input v-model="form.email" placeholder="Email" @blur="sendEmail"></el-input>
      </el-form-item>
      <el-form-item label="客户行业" prop="customerIndustry" :rules="[{required: true,message: '请输入客户行业'},{min: 0,max:255,message: '请输入客户行业'}]">
        <el-select v-model="form.customerIndustry" placeholder="请选择">
          <el-option v-for="item in userhy" :key="item.id" :label="item.label" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>


    </el-form>
    <div class="el-dialog__footer">
      <div slot="footer" class="dialog-footer" style="    text-align: center;">
        <el-button @click="cancelReturn()" style="    margin-right: 36px;">取 消</el-button>
        <el-button type="primary" @click="dataFormSubmit()">保 存</el-button>
      </div>
    </div>
    </el-dialog>
</template>

<script>
  export default {
    name: "agreementadd",
    props: {
      cancelReturn: {
        type: Function
      },
    },
    data() {
      return {
        visible: true,
        id: true,
        systemtype: [],
        usertype: [],
        userstatus: [],
        userhy: [],
        userly: [],
        form: {
          id: undefined,
          accountNo: undefined,
          zd_time: undefined,
          customerName: undefined,
          operator: undefined,
          examineUser: undefined,
          customerJcname: undefined,
          systemType: undefined,
          customerType: undefined,
          customerNo: undefined,
          contacts: undefined,
          salesman: undefined,
          status: undefined,
          phone: undefined,
          region: undefined,
          ybcode: undefined,
          address: undefined,
          companyPhone: undefined,
          fax: undefined,
          email: undefined,
          homepage: undefined,
          accountStatus: undefined,
          customerSource: undefined,
          customerIndustry: undefined,
          examineStatus: undefined,
          updateTime: undefined
        }

      }

    },
    methods: {
      init(id){
        this.id = id;
        this.getagreementType('systemtype');
        this.getagreementType('usertype');
        this.getagreementType('userstatus');
        this.getagreementType('userhy');
        this.getagreementType('userly');

        console.log(id)

        this.$nextTick(()=>{
          if (this.id) {
            this.getByid(this.id);
          }
        })
      },
      isMoney(money) {
        var reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
        if (reg.test(money)) {
          return true
        } else {
          this.$message({
            message: '请输入数字',
            type: 'error'
          })

        }
      },
      getByid(id) {
        this.$http({
          url: this.$http.adornUrl(
            `/hotel/agreement/getbyid/` + id
          ),
          method: "post",

        }).then(({
          data
        }) => {
          this.form = data.page;
        });
      },
      getagreementType(type) {
        this.$http({
          url: this.$http.adornUrl('/hotel/thotelagreementtype/list'),
          method: 'get',
          params: this.$http.adornParams({
            page: 1,
            limit: 999,
            type: type
          })
        }).then(({
          data
        }) => {
          if (type == 'systemtype') {
            this.systemtype = data.page.list;
            if(!this.id){
              if(this.systemtype.length > 0){
                this.form.systemType = this.systemtype[0].id
              }
            }
          }
          if (type == 'usertype') {
            this.usertype = data.page.list;
            if(!this.id){
              if(this.usertype.length > 0){
                this.form.customerType = this.usertype[0].id
              }
            }
          }
          if (type == 'userstatus') {
            this.userstatus = data.page.list;
            if(!this.id){
              if(this.userstatus.length > 0){
                this.form.status = this.userstatus[0].id
              }
            }
          }
          if (type == 'userhy') {
            this.userhy = data.page.list;
            if(!this.id){
              if(this.userhy.length > 0){
                this.form.customerIndustry = this.userhy[0].id
              }
            }

          }
          if (type == 'userly') {
            this.userly = data.page.list;
            if(!this.id){
              if(this.userly.length > 0){
                this.form.customerSource = this.userly[0].id
              }
            }

          }

        });
      },
      sendEmail() {
        // var regEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
        // if (this.form.email != '' && !regEmail.test(this.form.email)) {
        //   this.$message({
        //     message: '邮箱格式不正确',
        //     type: 'error'
        //   })
        //   this.form.email = ''
        // }
      },
      // 表单提交
      dataFormSubmit() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(
                `/hotel/agreement/${!this.form.id ? "save" : "update"}`
              ),
              method: "post",
              data: this.form
            }).then(({
              data
            }) => {
              if (data && data.code === 0) {
                this.$message({
                  message: "操作成功",
                  type: "success",
                  duration: 1500,
                  onClose: () => {
                    this.cancelReturn();
                  }
                });
              } else {
                this.$message.error(data.msg);
              }
            });
          }
        });
      }
    }

  }
</script>

<style lang="scss" scoped>
.el-form {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  & /deep/ .el-form-item .el-form-item__content {
	  width: 215px;
	  margin-right: 0;
  }
}
</style>
